<template>
  <div class="wrap">
    <div class="container-wrap">
      <el-container class="container">
        <el-aside class="aside" :width="asideWith+'px'">
          <el-menu :unique-opened="true" :router="true" :collapse="isCollapse" class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">系统管理</span>
              </template>
              <el-menu-item index="role">角色管理</el-menu-item>
              <el-menu-item index="/user">用户管理</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">平台管理</span>
              </template>
              <el-menu-item index="area">区域管理</el-menu-item>
              <el-menu-item index="estate">小区管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container class="main-header-container">
          <el-header class="header">
            <el-row>
              <el-col :span="2">
                <i :class="collapseClass" @click="changeCollapse"></i>
              </el-col>
              <el-col :span="20">
                <div class="header-left"><span>aaaaaaaaaaaaaa</span></div>
              </el-col>
              <el-col :span="2">
                <div>
                  <el-button type="text" @click="logout">退出</el-button>
                </div>
              </el-col>
            </el-row>
          </el-header>
          <el-main class="main">
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <!--    <div>-->
    <!--      <el-button @click="load">获取数据</el-button>-->
    <!--    </div>-->
  </div>
</template>

<script>
import request from '../../util/request';

export default {
  name: 'Home',
  data() {
    return {
      isCollapse: false,
      collapseClass: 'el-icon-s-fold',
      asideWith: 180,
    };
  },
  methods: {
    load() {
      request({
        url: '/load',
        method: 'get',
      }).then((res) => {
        console.log(res);
      }).catch((reason) => {
        console.log(reason);
      });
    },
    logout() {
      request.logout();
    },
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
      this.collapseClass = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
      this.asideWith = this.isCollapse ? 60 : 180;
    },
  },
};
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    min-height: 400px;
  }
  .wrap, .container-wrap, .container, .aside {
    height: 100%;
  }

  .aside {
    background-color: #D3DCE6;
  }

  .header {
    height: 60px;
    background-color: #b3c0d1;
  }
  .header-left{
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main {
    background-color: #E9EEF3;
  }

  /*.bg-purple {*/
  /*  background: #d3dce6;*/
  /*}*/
  /*.bg-purple-light {*/
  /*  background: #e5e9f2;*/
  /*}*/
  /*.grid-content {*/
  /*  border-radius: 4px;*/
  /*  min-height: 36px;*/
  /*}*/
</style>
